<template>
  <div class="body" v-loading="loading">
    <div>
      <el-button type="primary" size="small" icon="el-icon-check" @click="doSave">&nbsp;保&nbsp;存&nbsp;</el-button>
      <el-button type="info" size="small" icon="el-icon-back" @click="gotoList">&nbsp;返&nbsp;回&nbsp;</el-button>
    </div>
    <el-form ref="form" :model="header" size="small" label-width="80px" :inline="true" class="header">
      <div class="audit_icon iconfont" v-if="header.status === 'audit'"></div>
      <el-row>
        <el-col :span="5">
          <el-form-item label="仓库编码">{{ header.fNumber }}</el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="仓库名称">{{ header.fName }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建组织">{{ header.fCreateOrgName }}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="创建组织">{{ header.fOraCKYTSX }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="仓库IP">
            <el-input v-model="header.ip" type="textarea" :rows="2" placeholder="请输入ip,每行一个" style="width: 310px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <br />
    </el-form>
    <div class="detail_header">
      <div>
        <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteDetail">删除选择行</el-button>
        <el-button type="primary" size="small" icon="el-icon-plus" @click="addDetail">添加分录行</el-button>
      </div>
    </div>
    <el-table :data="locationList" class="detail" height="calc(100vh - 325px)" @selection-change="selectChange">
      <el-table-column label="#" width="60" align="center" type="selection"></el-table-column>
      <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
      <el-table-column label="仓位编码" width="200" align="left">
        <template #default="scope">
          <el-input size="small" v-model="scope.row.locationNo" :precision="2" style="width: 180px;" :min="0" />
        </template>
      </el-table-column>
      <el-table-column label="仓位名称" width="200" align="left">
        <template #default="scope">
          <el-input size="small" v-model="scope.row.locationName" :precision="2" style="width: 180px;" :min="0" />
        </template>
      </el-table-column>
      <el-table-column label="位置" mix-width="250" align="center">
        <template #default="scope">
          <el-input size="small" v-model="scope.row.position" :precision="2" style="width: 100%;" :min="0" />
        </template>
      </el-table-column>
      <el-table-column label="rfid" mix-width="250" align="center">
        <template #default="scope">
          <el-input size="small" v-model="scope.row.rfid" :precision="2" style="width: 100%;" :min="0" />
        </template>
      </el-table-column>
      <el-table-column label="备注" mix-width="250" align="center">
        <template #default="scope">
          <el-input size="small" v-model="scope.row.remark" :precision="2" style="width: 100%;" :min="0" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="90" fixed="right">
        <template #default="scope">
          <el-button type="text" style="color: var(--el-color-danger)" icon="el-icon-delete" @click="deleteRow(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { getBoxNo } from '../../utils'

export default {
  data() {
    return {
      loading: false,
      materialLoading: false,
      materialList: [],
      header: {},
      locationList: [],
      selection: []
    }
  },
  async mounted() {
    let fNumber = this.$route.query.fNumber
    if (fNumber) {
      return this.getBill(fNumber)
    }
  },
  methods: {
    gotoList() {
      return this.$router.push('/basic/stockList')
    },
    async getBill(fNumber) {
      this.loading = true
      try {
        let res = await this.callApi('get_stock_detail', { fNumber })
        if (res.res) {
          // this.materialList = [{ fNumber: res.header.materialNo, fName: res.header.materialName, fSpecification: res.header.materialSpec }]
          this.header = res.header || {}
          if (res.header.ip) {
            this.header.ip = res.header.ip.join("\n")
          }
          this.locationList = res.locationList || []
          this.changeDetailCount()
        }
      } finally {
        this.loading = false
      }
    },
    doSave() {
      this.$refs.form.validate(async valid => {
        if (!valid) {
          return
        }
        if (this.locationList.length === 0) {
          this.$message.error('没有分录')
          return
        }
        for(let i = 0; i < this.locationList.length; i++) {
          if (!this.locationList[i].locationNo || !this.locationList[i].locationName) {
            this.$message.error('分录行仓位编码或名称空缺')
            return
          }
        }
        let isRepeat = this.isRepeat(this.locationList)
        if (isRepeat) {
          this.$message.error('仓位编码不允许重复')
          return
        }
        this.loading = true
        let ip = []
        if (this.header.ip) {
          ip = this.header.ip.split("\n")
        }
        let locationList = []
        for(let i = 0; i < this.locationList.length; i++) {
          locationList.push({
            locationNo: this.locationList[i].locationNo,
            locationName: this.locationList[i].locationName ,
            remark: this.locationList[i].remark,
            rfid: this.locationList[i].rfid,
            position: this.locationList[i].position
          })
        }

        let param = {
          fNumber: this.header.fNumber,
          fName: this.header.fName,
          locationList,
          ipList: ip
        }
        try {
          let res = await this.callApi('save_stock_detail', param)
          if (!res.res) {
            return
          }
          // this.header.fName = res.fName
          this.$message.success('保存完成')
        } finally {
          this.loading = false
        }
      })
    },
    isRepeat(arr) {
      let isRepeat = false;
      for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
          if (arr[i].locationNo === arr[j].locationNo) {
            isRepeat = true;
          }
        }
      }
      return isRepeat;
    },
    selectChange(data) {
      this.selection = data
    },
    async deleteDetail() {
      try {
        await this.$confirm('确定删除吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch(e) {
        return
      }
      this.selection.forEach(sel => {
        for(let i = 0; i < this.locationList.length; i++) {
          if (this.locationList[i].locationName === sel.locationName) {
            this.locationList.splice(i, 1)
            break
          }
        }
      })
      this.changeDetailCount()
    },
    addDetail() {
      this.locationList.push({
        locationNo: '',
        locationName: '',
        remark: '',
        rfid: '',
        position: '',
      })
    },
    async deleteRow(idx) {
      try {
        await this.$confirm('确定删除吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch(e) {
        return
      }
      this.locationList.splice(idx, 1)
      this.changeDetailCount()
    },
    changeDetailCount() {
      let total = 0
      for(let i = 0; i < this.locationList.length; i++) {
        total += this.locationList[i].count
      }
      this.header.count = total
    }
  }
}
</script>

<style lang="scss" scoped>
.body {
  padding: 20px 0;
  .header {
    width: 1200px;
    margin-top: 20px;
    position: relative;
    .audit_icon {
      position: absolute;
      top: -10px;
      left: 80px;
      font-size: 48px;
      color: var(--el-color-danger);
    }
    .material {
      width: 100%;
    }
    .comment {
      margin-left: 10px;
    }
  }
  .detail_header {
    display: flex;
    justify-content: space-between;
    margin-top: -10px;
    .stat {
      display: flex;
      font-size: 15px;
      >div {
        display: flex;
        align-items: baseline;
        line-height: 32px;
        .label {
          text-align: right;
          margin-right: 5px;
          color: #aaa;
        }
        .value {
          min-width: 50px;
          margin-right: 10px;
          color: #666;
        }
      }
    }
  }
}
</style>
